<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子合同申请</title>

    <!--引入本地 element-ui 的样式，-->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>


</head>
<body>

    <div id="app">
        <!-- 每页数据数量一定，最后一页需要显示合计 -->
        <div id="printListFamily">
            <div
                    v-for="(item, index) in parseInt(page.pageCount)"
                    :key="index"
                    style="page-break-after: always"
            >
                <table
                        border="1"
                        cellpadding="8"
                        style="border-collapse: collapse; width: 100%; font-size: 10px"
                >
                    <caption>
                        <p style="font-size: 20px">供养直系亲属医疗保险支出明细表</p>
                        <p>{{qzrq}}</p>
                    </caption>
                    <tr>
                        <th align="center" rowspan="2">序号</th>
                        <th align="center" rowspan="2">编号</th>
                        <th align="center" rowspan="2">身份证号</th>
                        <th align="center" rowspan="2">联系方式</th>
                        <th align="center" rowspan="2">姓名</th>
                        <th align="center" colspan="2">基本医疗补助</th>
                        <th align="center" colspan="2">大病医疗补助</th>
                        <th align="center" rowspan="2">合计</th>
                        <th align="center" rowspan="2">银行账号</th>
                        <th align="center" rowspan="2">附件张数</th>
                    </tr>
                    <tr>
                        <th align="center">普通门诊</th>
                        <th align="center">住院</th>
                        <th align="center">特殊病门诊</th>
                        <th align="center">住院</th>
                    </tr>
                    <!-- 这里是循环的列表数据 -->
                    <tr v-for="(item1,index1) in pagedata[index]" :key="index1">
                        <td align="center">{{item1.rw}}</td>
                        <td align="center">{{item1.knn001}}</td>
                        <td align="center">{{item1.aac002}}</td>
                        <td align="center">{{item1.aac003}}</td>
                        <td align="center">{{item1.aae007}}</td>
                        <td align="center">{{item1.b1}}</td>
                        <td align="center">{{item1.b2}}</td>
                        <td align="center">{{item1.b3}}</td>
                        <td align="center">{{item1.b4}}</td>
                        <td align="center">{{item1.sum}}</td>
                        <td align="center">{{item1.aae006}}</td>
                        <td align="center">{{item1.zs}}</td>
                    </tr>
                    <!-- 如果已经是最后一页，则显示合计 -->
                    <tr>
                        <td align="center" colspan="5">合计</td>
                        <td align="center">{{sum.b1}}</td>
                        <td align="center">{{sum.b2}}</td>
                        <td align="center">{{sum.b3}}</td>
                        <td align="center">{{sum.b4}}</td>
                        <td align="center">{{sum.sum}}</td>
                        <td align="center"></td>
                        <td align="center">{{sum.zs}}</td>
                    </tr>
                </table>
                <div
                        style="
              display: flex;
              justify-content: space-around;
              margin-top: 30px;
              font-size: 10px;
            "
                >
                    <div>财务审核人：</div>
                    <div>中心领导：</div>
                    <div>稽核人：</div>
                    <div>复核人：</div>
                    <div>填报人：</div>
                    <div>填报日期：</div>
                </div>
            </div>
        </div>
    </div>

    <script>


        var vm = new Vue({
           el:"#app",
            data() {
                return {
                    // 表格数据
                    pagedata: {},
                    sum:{},
                    page:{},
                    qzrq:""
                };
            },
            methods: {
                printHtml(){
                    $("#printListFamily").print();
                },
                // 获取表格数据
                setData(data) {
                    this.pagedata = data.pagedata;
                    this.sum = data.sum;
                    this.page = data.page;
                    this.qzrq = data.qzrq;
                },
                //   打印方法
                goPrint() {
                    printJS({
                        printable: "printListFamily",
                        type: "html",
                        // 表格表头较复杂且每页要显示审核人等信息，所以不能用json数据打印
                        // properties: [
                        //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                        //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                        // ],
                        // header: `<div style="font-size:30px;text-align:center;"> 玉门油田企业员工补充医疗保险结算单 </div>`,
                        style: "@media print{@page {size:landscape}}",
                        // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                        // gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                        // repeatTableHeader: true,
                        scanStyles: false,
                        targetStyles: ["*"],
                        ignoreElements: ["no-print"],
                    });
                },
                // 关闭窗口
                handleClose() {
                    this.remoteClose();
                },
            },
        });

        function setData(data){
            vm.setData(data);
        }
    </script>
</body>
</html>